<template>
  <!--  好友页面-->
  <van-search v-model="friendUsername" placeholder="请输入好友昵称"
              @search="searchFriend" style="font-size: 20px"/>
  <div class="title">我的好友</div>
  <div class="friends-page">
    <van-empty v-if="friends.length<1" description="暂无好友"/>
    <van-list
        v-model:loading="loading"
        :finished="finished"
        :finished-text="friends.length > 0 ? '没有更多了！' : ''"
        @load="loadEvent"
    >
      <div class="friend-card" v-for="friend in friends">
        <van-image class="friend-avatar" round
                   :src="friend.avatarUrl"
                   @click="showUserInfo(friend.id)"/>
        <div class="friend-name">
          {{ friend.username.slice(0, 10) }}
        </div>
        <div class="message-div">
          <van-icon class="message" :content="''"
                    max="99" :size="40" name="chat-o" @click="chat(friend.id, friend.username)"/>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import {userVO} from "../models/user";
import {ResponseResult} from "../models/resopnse";
import myAxios from "../plugins/myAxios";
import {useRouter} from "vue-router";
import {getCurrentUser} from "../services/user.ts";
import {chatScopeEnum} from "../constants/chat.ts";

const router = useRouter()

const friendUsername = ref<string>()

const searchFriend = async () => {
  await loadEvent()
  const res: ResponseResult<userVO[]> = await myAxios.post('/user/searchFriend', {
    username: friendUsername.value,
  })
  if (res.code === 0) {
    friends.value = res.data.filter(Boolean)
  }
  end()
  console.log(friends.value)
}
const finished = ref<boolean>(false);
const loading = ref<boolean>(false)

const friends = ref<userVO[]>([])
onMounted(() => {
  getCurrentUser()
  loadFriends()
})

const loadEvent = async () => {
  start()
}

const loadFriends = async () => {
  await loadEvent()
  const res: ResponseResult<userVO[]> = await myAxios.get('/user/friends')
  if (res.code === 0) {
    // alert('加载成功')
    friends.value = res.data.filter(Boolean)
  }
  end()
}

const start = () => {
  loading.value = true;
  finished.value = false;
}
const end = () => {
  loading.value = false
  finished.value = true
}

const chat = (id: number, username: string) => {
  // 跳转到聊天页面
  router.push({
    path: '/chat',
    query: {
      id,
      scope: chatScopeEnum.PRIVATE_CHAT,
      name: username
    }
  })
}

const showUserInfo = (id: number) =>{
  router.push({
    path: '/user/info',
    query: {
      id
    }
  })
}

</script>

<style scoped>
.friends-page {
  padding: 10px;
}

.title {
  font-weight: bold;
  font-size: 20px;
  padding-left: 15px;
  padding-bottom: 10px;
}

.van-search {
  --van-search-input-height: 40px;
  --van-search-padding: 10px 10px;
  --van-search-left-icon-color: #A61515;
}

.friend-card {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  margin-left: 6px;
}

.friend-avatar {
  width: 4rem;
  height: 4rem;
}

.friend-name {
  flex-grow: 1;
  margin-left: 15px;
  font-size: 20px;
  font-weight: bold;
}

.message-div {
  margin-left: auto;
  margin-right: 10px;
}

.message {
  margin-top: 8%;
}

</style>
